<template>
  <div class="nav_outer">
    <Header>资讯详情</Header>
    <div class="content">
        <h5 class="tcenter" style="color:#333;font-weight:bold;font-size:1.05em;" v-html="detail.title"></h5>
        <p class="tcenter" style="font-size:0.8em;margin-top:10px;"><span></span> <span>发布时间：{{detail.createDate}} </span></p>
        <div class="artcontent">
            <img :src="detail.thumbNail | imgpre" alt="">
            <div v-html="detail.content"></div>
        </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/commonComponents/Header'
export default {
  data() {
    return {
      detail:{}
    }
  },
  created(){
    let id = this.$route.query.id;
    this.loadDetail(id);
  },
  mounted() {
    let mui = this.mui;
  },
  methods: {
    loadDetail(id){
      let that = this;
      that.Http2.get(`/mobile/article/${id}`, null).then(
        res => {
            this.detail = res.data;
        }
      );
    }
  },
  components: {
      Header
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .content{
      padding: px2em(45);
      background: #fff;
      .artcontent{
          margin: px2em(34) 0;
          div{
              font-size: 0.9em;
              color: #666;
          }
          img{
              width: 100%;
          }
      }
  }
</style>